<template>
  <!-- 档案车 -->
  <div class="container">
    <el-card class="box-card" :body-style="{ padding: 10 }" v-if="activeName == 'box'">
      <el-form :inline="true" :model="boxQueryParam" class="demo-form-inline" size="medium">
        <el-form-item label="盒号/盒名">
          <el-input v-model="boxQueryParam.boxNoOrName" placeholder="请输入盒号或盒名" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="boxOnSubmit">查询</el-button>
          <el-button @click="boxRest">重置</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleUp('box')">上架</el-button>
          <el-button type="primary" @click="handleDown('box')">下架</el-button>
          <el-button type="primary" @click="handleOut('box')">出库</el-button>
          <el-button type="primary" @click="handleIn('box')">入库</el-button>
          <el-button type="danger" icon="el-icon-delete" @click="handleDel('box')">移除</el-button>
        </el-form-item>
      </el-form>
      <!-- </el-col> -->
      <el-row :gutter="24">
        <el-col :span="24"> </el-col>
      </el-row>
    </el-card>
    <el-card class="box-card" :body-style="{ padding: 10 }" v-else>
      <el-form :inline="true" :model="archiveQueryParam" class="demo-form-inline" size="medium">
        <el-form-item label="档号/题名">
          <el-input v-model="archiveQueryParam.archiveNoOrName" placeholder="请输入档号或题名" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="archiveOnSubmit">查询</el-button>
          <el-button @click="archiveRest">重置</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleUp('archive')">上架</el-button>
          <el-button type="primary" @click="handleDown('archive')">下架</el-button>
          <el-button type="primary" @click="handleOut('archive')">出库</el-button>
          <el-button type="primary" @click="handleIn('archive')">入库</el-button>
          <el-button type="danger" icon="el-icon-delete" @click="handleDel('archive')">移除</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-tabs v-model="activeName" tab-position="left" type="border-card" @tab-click="handleClick">
      <el-tab-pane label="档案盒" name="box">
        <el-card class="box-card" :body-style="{ padding: 10 }">
          <el-table :data="boxTableData" row-key="labelId" border style="width: 100%" height="55vh" ref="boxtable"
            @selection-change="boxSelectionChange">
            <el-table-column type="selection" width="55" align="center" sortable> </el-table-column>
            <el-table-column type="index" label="序号" width="50" align="center" sortable>
            </el-table-column>
            <el-table-column v-for="item of boxTableProps" :key="item.props" :prop="item.prop" :label="item.title"
              :width="item.width" :sortable="item.sortable" :show-overflow-tooltip="item.showOverflowTooltip">
              <template #default="scope">
                <span v-if="item.prop === 'boxNo'">
                  <el-link v-if="scope.row.boxNo" type="primary" :underline="false" style="font-size: 12px"
                    @click="archivesByBoxNo(scope.row)">
                    {{ scope.row[item.prop] }}
                  </el-link>
                  <span v-else>无</span>
                </span>
                <span v-else-if="item.prop === 'stageStatus'">
                  <el-tag v-show="scope.row.stageStatus == 1" type="success">已上架</el-tag>
                  <el-tag v-show="scope.row.stageStatus == 2" type="danger">已下架</el-tag>
                </span>
                <span v-else-if="item.prop === 'storeStatus'">
                  <el-tag :type="statusInfo(scope.row).type">
                    {{ statusInfo(scope.row).text }}
                  </el-tag>
                </span>
                <span v-else>{{ scope.row[item.prop] }}</span>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="档案" name="archive">
        <el-card class="box-card" :body-style="{ padding: 10 }">
          <el-table :data="archiveTableData" row-key="labelId" border style="width: 100%" height="55vh"
            ref="archivetable" @selection-change="archiveSelectionChange">
            <el-table-column type="selection" width="55" align="center" sortable> </el-table-column>
            <el-table-column type="index" label="序号" width="50" align="center" sortable>
            </el-table-column>
            <el-table-column v-for="item of archiveTableProps" :key="item.props" :prop="item.prop" :label="item.title"
              :width="item.width" :sortable="item.sortable" :show-overflow-tooltip="item.showOverflowTooltip">
              <template #default="scope">
                <span v-if="item.prop === 'boxNo'">
                  <el-link v-if="scope.row.boxNo" type="primary" :underline="false" style="font-size: 12px"
                    @click="archivesByBoxNo(scope.row)">
                    {{ scope.row[item.prop] }}
                  </el-link>
                  <span v-else>无</span>
                </span>
                <span v-else-if="item.prop === 'stageStatus'">
                  <el-tag v-show="scope.row.stageStatus == 1" type="success">已上架</el-tag>
                  <el-tag v-show="scope.row.stageStatus == 2" type="danger">已下架</el-tag>
                  <el-tag v-show="scope.row.stageStatus == 3" type="warning">已销毁</el-tag>
                </span>
                <span v-else-if="item.prop === 'storeStatus'">
                  <el-tag :type="statusInfo(scope.row).type">
                    {{ statusInfo(scope.row).text }}
                  </el-tag>
                </span>
                <span v-else>{{ scope.row[item.prop] }}</span>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-tab-pane>
    </el-tabs>
    <el-card class="box-card" :body-style="{ padding: 10 }" v-if="activeName == 'box'">
      <pagination ref="boxpagination" :totalCount="boxTotalCount" @pagination="boxPagination"></pagination>
    </el-card>
    <el-card class="box-card" :body-style="{ padding: 10 }" v-else>
      <pagination ref="archivepagination" :totalCount="archiveTotalCount" @pagination="archivePagination"></pagination>
    </el-card>
    <archives-by-box-no ref="archivesByBoxNo"></archives-by-box-no>
    <archives-out-dialog ref="archivesOutDialog" @ok="archiveLoadData"></archives-out-dialog>
    <box-out-dialog ref="boxOutDialog" @ok="boxLoadData"></box-out-dialog>
    <archives-in-dialog ref="archivesInDialog" @ok="archiveLoadData"></archives-in-dialog>
    <box-in-dialog ref="boxInDialog" @ok="boxLoadData"></box-in-dialog>
    <down-shelves-dialog ref="downShelvesDialog" @ok="loadData"></down-shelves-dialog>
    <up-shelves-dialog ref="upShelvesDialog" @ok="loadData"></up-shelves-dialog>
  </div>
</template>

<script>
import { pageList, del } from '@/api/rfid/labelCar'
import archivesByBoxNo from '@/views/rfid/dialog/archivesByBoxNo.vue'
import archivesOutDialog from '@/views/rfid/dialog/archivesOutDialog.vue'
import boxOutDialog from '@/views/rfid/dialog/boxOutDialog.vue'
import archivesInDialog from '@/views/rfid/dialog/archivesInDialog.vue'
import boxInDialog from '@/views/rfid/dialog/boxInDialog.vue'
import downShelvesDialog from '@/views/rfid/dialog/downShelvesDialog.vue'
import upShelvesDialog from '@/views/rfid/dialog/upShelvesDialog.vue'
export default {
  name: 'AmsCar',
  components: {
    archivesByBoxNo,
    archivesOutDialog,
    boxOutDialog,
    archivesInDialog,
    boxInDialog,
    downShelvesDialog,
    upShelvesDialog,
  },
  data() {
    return {
      activeName: 'box',
      boxTotalCount: 0, //总数
      //查询条件
      boxSearchModel: {
        pageNo: 1,
        pageSize: 10,
      },
      boxQueryParam: {
        labelType: 1,
      },
      boxTableData: [],
      boxTableProps: [
        { title: '盒号', prop: 'boxNo', width: '', checked: true, showOverflowTooltip: true },
        { title: '盒名', prop: 'boxName', width: '', checked: true, showOverflowTooltip: true },
        { title: 'RFID', prop: 'rfid', width: '', checked: true, showOverflowTooltip: true },
        {
          title: '位置',
          prop: 'positionName',
          width: '',
          checked: true,
          showOverflowTooltip: true,
        },
        {
          title: '上架状态',
          prop: 'stageStatus',
          width: '',
          checked: true,
          showOverflowTooltip: true,
        },
        {
          title: '在库状态',
          prop: 'storeStatus',
          width: '',
          checked: true,
          showOverflowTooltip: true,
        },
      ],
      boxSelectionData: [],
      archiveTotalCount: 0,
      //查询条件
      archiveSearchModel: {
        pageNo: 1,
        pageSize: 10,
      },
      archiveQueryParam: {
        labelType: 0,
      },
      archiveTableData: [],
      archiveTableProps: [
        { title: '档号', prop: 'archiveNo', width: '', checked: true, showOverflowTooltip: true },
        { title: '盒号', prop: 'boxNo', width: '', checked: true, showOverflowTooltip: true },
        { title: '题名', prop: 'archiveName', width: '', checked: true, showOverflowTooltip: true },
        { title: 'RFID', prop: 'rfid', width: '', checked: true, showOverflowTooltip: true },
        {
          title: '位置',
          prop: 'positionName',
          width: '',
          checked: true,
          showOverflowTooltip: true,
        },
        {
          title: '上架状态',
          prop: 'stageStatus',
          width: '',
          checked: true,
          showOverflowTooltip: true,
        },
        {
          title: '在库状态',
          prop: 'storeStatus',
          width: '',
          checked: true,
          showOverflowTooltip: true,
        },
      ],
      archiveSelectionData: [],
    }
  },

  mounted() {
    this.boxLoadData()
    this.archiveLoadData()
  },

  methods: {
    statusInfo(row) {
      if (row.storeStatus === 0) return { type: '', text: '未入库' }
      if (row.storeStatus === 1) {
        return row.stageStatus === 1
          ? { type: 'success', text: '在库' }
          : { type: 'warning', text: '暂存' }
      }
      if (row.storeStatus === 2) return { type: 'danger', text: '离库' }
      return { type: '', text: '' }
    },
    handleClick(tab, event) {
      if (tab.name === 'archive') {
        this.archiveTableData = []
        this.archiveLoadData()
      } else if (tab.name === 'box') {
        this.boxTableData = []
        this.boxLoadData()
      }
    },
    boxOnSubmit() {
      this.$refs.boxpagination.resetPagination()
    },
    boxRest() {
      this.boxQueryParam = {
        labelType: 1,
      }
      this.$refs.boxpagination.resetPagination()
    },
    boxLoadData() {
      var param = Object.assign(this.boxQueryParam, this.boxSearchModel)
      pageList(param)
        .then((res) => {
          if (res.data.code === 200) {
            this.boxTableData = res.data.data.records
            this.boxTotalCount = res.data.data.total
          } else {
            this.$message.error(res.data.message)
          }
        })
        .catch((err) => {
          this.$message.error(err)
        })
    },
    boxPagination(val) {
      this.boxSearchModel.pageNo = val.page
      this.boxSearchModel.pageSize = val.limit
      this.boxLoadData()
    },
    boxSelectionChange(val) {
      this.boxSelectionData = val
    },
    archiveOnSubmit() {
      this.$refs.archivepagination.resetPagination()
    },
    archiveRest() {
      this.archiveQueryParam = {
        labelType: 0,
      }
      this.$refs.archivepagination.resetPagination()
    },
    archiveLoadData() {
      var param = Object.assign(this.archiveQueryParam, this.archiveSearchModel)
      pageList(param)
        .then((res) => {
          if (res.data.code === 200) {
            this.archiveTableData = res.data.data.records
            this.archiveTotalCount = res.data.data.total
          } else {
            this.$message.error(res.data.message)
          }
        })
        .catch((err) => {
          this.$message.error(err)
        })
    },
    archivePagination(val) {
      this.archiveSearchModel.pageNo = val.page
      this.archiveSearchModel.pageSize = val.limit
      this.archiveLoadData()
    },
    archiveSelectionChange(val) {
      this.archiveSelectionData = val
    },
    archivesByBoxNo(row) {
      this.$refs.archivesByBoxNo.init(row)
    },
    handleUp(type) {
      if (type === 'box') {
        if (this.boxSelectionData.length === 0) {
          this.$message.warning('请选择要上架的档案盒')
          return
        }
        // 已上架或销毁的不允许再次上架
        if (
          this.boxSelectionData.some((item) => item.stageStatus === 1 || item.stageStatus === 3)
        ) {
          this.$message.warning('存在不符合上架条件的档案盒')
          return
        }
        // 离库的档案盒不能上架
        if (this.boxSelectionData.some((item) => item.storeStatus === 2)) {
          this.$message.warning('存在离库的档案盒')
          return
        }
        this.$refs.upShelvesDialog.add(this.boxSelectionData, 'box')
      } else if (type === 'archive') {
        if (this.archiveSelectionData.length === 0) {
          this.$message.warning('请选择要上架的档案')
          return
        }
        // 已上架或销毁的不允许再次上架
        if (
          this.archiveSelectionData.some((item) => item.stageStatus === 1 || item.stageStatus === 3)
        ) {
          this.$message.warning('存在不符合上架条件的档案')
          return
        }
        // 离库的档案不能上架
        if (this.archiveSelectionData.some((item) => item.storeStatus === 2)) {
          this.$message.warning('存在离库的档案')
          return
        }
        // 已装盒的档案不允许单独上架
        if (this.archiveSelectionData.some((item) => item.boxNo !== null)) {
          this.$message.warning('已装盒的档案不允许上架')
          return
        }
        this.$refs.upShelvesDialog.add(this.archiveSelectionData, 'archive')
      }
    },
    handleDown(type) {
      if (type === 'box') {
        if (this.boxSelectionData.length === 0) {
          this.$message.warning('请选择要下架的档案盒')
          return
        }
        // 已上架或销毁的不允许再次上架
        if (
          this.boxSelectionData.some((item) => item.stageStatus === 2 || item.stageStatus === 3)
        ) {
          this.$message.warning('存在不符合下架条件的档案盒')
          return
        }
        this.$refs.downShelvesDialog.add(this.boxSelectionData, 'box')
      } else if (type === 'archive') {
        if (this.archiveSelectionData.length === 0) {
          this.$message.warning('请选择要下架的档案')
          return
        }
        // 已装盒的档案不允许单独下架
        if (this.archiveSelectionData.some((item) => item.boxNo !== null)) {
          this.$message.warning('已装盒的档案不允许下架')
          return
        }
        // 已上架或销毁的不允许再次上架
        if (
          this.archiveSelectionData.some((item) => item.stageStatus === 2 || item.stageStatus === 3)
        ) {
          this.$message.warning('存在不符合下架条件的档案')
          return
        }
        this.$refs.downShelvesDialog.add(this.archiveSelectionData, 'archive')
      }
    },
    handleOut(type) {
      if (type === 'box') {
        if (this.boxSelectionData.length === 0) {
          this.$message.warning('请选择要出库的档案盒')
          return
        }
        // 在库且已上架或已下架的档案盒可以出库
        if (
          this.boxSelectionData.some(
            (item) => (item.stageStatus !== 1 && item.stageStatus !== 2) || item.storeStatus !== 1
          )
        ) {
          this.$message.warning('存在不符合出库条件的档案盒')
          return
        }
        // 已下架和已上架的不能同时出库
        if (
          this.boxSelectionData.some((item) => item.stageStatus === 2) &&
          this.boxSelectionData.some((item) => item.stageStatus === 1)
        ) {
          this.$message.warning('已下架和已上架的不能同时出库')
          return
        }
        this.$refs.boxOutDialog.add(this.boxSelectionData)
      } else if (type === 'archive') {
        if (this.archiveSelectionData.length === 0) {
          this.$message.warning('请选择要出库的档案')
          return
        }
        // 在库且已上架或已下架的可以出库
        if (
          this.archiveSelectionData.some(
            (item) => (item.stageStatus !== 1 && item.stageStatus !== 2) || item.storeStatus !== 1
          )
        ) {
          this.$message.warning('存在不符合出库条件的档案')
          return
        }
        // 已下架和已上架的不能同时出库
        if (
          this.archiveSelectionData.some((item) => item.stageStatus === 2) &&
          this.archiveSelectionData.some((item) => item.stageStatus === 1)
        ) {
          this.$message.warning('已下架和已上架的不能同时出库')
          return
        }
        this.$refs.archivesOutDialog.add(this.archiveSelectionData)
      }
    },
    handleIn(type) {
      if (type === 'box') {
        if (this.boxSelectionData.length === 0) {
          this.$message.warning('请选择要入库的档案盒')
          return
        }
        // 离库的可以入库
        if (this.boxSelectionData.some((item) => item.storeStatus !== 2)) {
          this.$message.warning('存在不符合入库条件的档案盒')
          return
        }
        this.$refs.boxInDialog.add(this.boxSelectionData)
      } else if (type === 'archive') {
        if (this.archiveSelectionData.length === 0) {
          this.$message.warning('请选择要入库的档案')
          return
        }
        // 已装盒的档案不允许单独入库
        if (this.archiveSelectionData.some((item) => item.boxNo !== null)) {
          this.$message.warning('已装盒的档案不允许入库')
          return
        }
        // 已上架或销毁的不允许再次上架
        if (this.archiveSelectionData.some((item) => item.storeStatus !== 2)) {
          this.$message.warning('存在不符合入库条件的档案')
          return
        }
        this.$refs.archivesInDialog.add(this.archiveSelectionData)
      }
    },
    handleDel(type) {
      if (type === 'box') {
        if (this.boxSelectionData.length === 0) {
          this.$message.warning('请选择要移除的档案盒')
          return
        }
        del(this.boxSelectionData.map((item) => item.carId).join(','))
          .then((res) => {
            if (res.data.code === 200) {
              this.$message.success('移除成功')
              this.boxLoadData()
            } else {
              this.$message.error(res.data.message)
            }
          })
          .catch((err) => {
            this.$message.error(err)
          })
      } else if (type === 'archive') {
        if (this.archiveSelectionData.length === 0) {
          this.$message.warning('请选择要移除的档案')
          return
        }
        del(this.archiveSelectionData.map((item) => item.carId).join(','))
          .then((res) => {
            if (res.data.code === 200) {
              this.$message.success('移除成功')
              this.archiveLoadData()
            } else {
              this.$message.error(res.data.message)
            }
          })
          .catch((err) => {
            this.$message.error(err)
          })
      }
    },
    loadData(type) {
      if (type === 'box') {
        this.boxLoadData()
      } else if (type === 'archive') {
        this.archiveLoadData()
      }
    },
  },
}
</script>

<style lang="less" scoped>
@import '@/style/tabs.less';

.demo-form-inline {
  .el-form-item {
    margin-bottom: 0 !important;
  }
}

.el-tabs__item {
  height: 50%;
}

.el-tabs__header {
  height: 60vh !important;
}
</style>
